<template>
  <div style="background: #f5f5f5;" class="edit-box">
    <div class="top-fixed">
      <x-header
        :left-options="{ backText: $t('common.back'), preventGoBack: true }"
        class="header"
        @on-click-back="clickBack"
      >
        <header-title :title="title" />
        <a slot="right" @click="send">{{ $t('notice.send') }}</a>
      </x-header>
    </div>
    <div style="margin-top: 47px;">
      <group>
        <x-input
          :title="
            `<span style='color: red'>*</span>${$t('notice.noticeTitle')}`
          "
          :placeholder="$t('notice.plsInputTitle')"
          v-model="theme"
          :show-clear="false"
          text-align="right"
          type="text"
        />
      </group>

      <group style="margin-top: -10px;">
        <div class="area-box">
          <span
          ><span style="color: red;">*</span
          >{{ $t('notice.sendArea') }}:</span
          >
          <span class="area-content" style="float: right;">
            {{ areaMembersContent }} {{ areaOrgsContent }}
            {{ areaGroupsContent }}
            <span />
          </span>
          <span class="icon" @click="showSendArea = true">
            <x-icon style="fill: #3c7cfc;" type="ios-plus-outline" size="26" />
          </span>
        </div>
      </group>
      <group style="margin-top: -10px;">
        <p class="notice-content">
          <span style="color: red;">*</span>{{ $t('notice.noticeContent') }}:
        </p>
        <x-textarea
          :placeholder="$t('notice.plsInputContent')"
          v-model="noticeContent"
        />
      </group>
      <!-- 模板消息左右按钮 -->
      <div v-show="noticeType === 'templateNotice'">
        <group style="margin-top: -10px;">
          <x-input
            :title="
              `<span style='color: red'>*</span>${$t('notice.leftButton')}`
            "
            :placeholder="$t('notice.plsInputLB')"
            v-model="leftButton"
            :show-clear="false"
            text-align="right"
            type="text"
          />
        </group>
        <group style="margin-top: -10px;">
          <x-input
            :title="
              `<span style='color: red'>*</span>${$t('notice.rightButton')}`
            "
            v-model="rightButton"
            :placeholder="$t('notice.plsInputRB')"
            :show-clear="false"
            text-align="right"
            type="text"
          />
        </group>
      </div>

      <div v-transfer-dom>
        <popup v-model="showSendArea" height="100%">
          <div class="popup1">
            <send-area
              v-if="needRefresh"
              @getSelectedInfo="getSelectedInfo"
              @close="close"
            />
          </div>
        </popup>
      </div>
    </div>
  </div>
</template>

<script>
import {
  XInput,
  Group,
  Cell,
  XTextarea,
  Toast,
  XHeader,
  Popup,
  TransferDom,
  Actionsheet,
  Loading,
  Confirm,
} from 'vux';
import HeaderTitle from '@/components/common/HeaderTitle';
import SendArea from '@/components/SendArea';
import { editMessage } from '@/api/edit-message';
export default {
  components: {
    XInput,
    Group,
    Cell,
    XTextarea,
    Toast,
    XHeader,
    HeaderTitle,
    Popup,
    TransferDom,
    SendArea,
    Actionsheet,
    Loading,
    Confirm,
  },
  data() {
    return {
      theme: '',
      noticeContent: '',
      areaMembersContent: '',
      areaOrgsContent: '',
      areaGroupsContent: '',
      showSendArea: false,
      areaMembers: [],
      areaOrgs: {},
      areaGroups: [],
      needRefresh: false, // 需不需要刷新
      leftButton: null,
      rightButton: null,
    };
  },
  computed: {
    noticeType() {
      return this.$route.query.key;
    },
    title() {
      return this.noticeType === 'templateNotice'
        ? this.$t('notice.templateNotice')
        : this.$t('notice.commonNotice');
    },
    // 消息类型 后端写死0为普通消息，1为模板消息
    type() {
      return this.noticeType === 'commonNotice' ? 0 : 1;
    },
  },
  methods: {
    // 公共的提示
    toast(msg) {
      this.$vux.toast.show({
        type: 'text',
        width: '10em',
        text: msg,
      });
    },
    // 关闭添加范围
    close(data) {
      this.showSendArea = data;
    },
    // 获取选中的联系人和部门
    getSelectedInfo(data) {
      this.areaMembers = data.selectedUsers;
      this.areaOrgs = data.selectedOrgInfo;
      this.areaGroups = data.selectedGroups;
      if (this.areaMembers.length) {
        const memberName = [];
        this.areaMembers.forEach(item => {
          memberName.push(item.name);
        });
        this.areaMembersContent = memberName.join(',');
      } else {
        this.areaMembersContent = '';
      }
      if (Object.keys(this.areaOrgs).length) {
        const orgName = [];
        this.areaOrgs.checkedUsers.forEach(item => {
          orgName.push(item.name);
        });
        this.areaOrgs.checkedOrgs.forEach(item => {
          orgName.push(item.name);
        });
        this.areaOrgsContent = orgName.join(',');
        if (
          !this.areaOrgs.checkedUsers.length &&
          !this.areaOrgs.checkedOrgs.length
        ) {
          this.areaOrgsContent = '';
        }
      }
      if (this.areaGroups.length) {
        const groupName = [];
        this.areaGroups.forEach(item => {
          groupName.push(item.name);
        });
        this.areaGroupsContent = groupName.join(',');
      } else {
        this.areaGroupsContent = '';
      }
    },
    // 发布
    async send() {
      if (!this.theme) {
        this.toast(this.$t('notice.titleNull'));
        return;
      }

      if (
        !this.areaMembersContent &&
        !this.areaOrgsContent &&
        !this.areaGroupsContent
      ) {
        this.toast(this.$t('notice.areaNull'));
        return;
      }

      if (!this.noticeContent) {
        this.toast(this.$t('notice.contentNull'));
        return;
      }
      if (this.type === 1 && (!this.leftButton || !this.rightButton)) {
        this.toast(this.$t('notice.buttonNull'));
        return;
      }

      const params = {
        title: this.theme,
        content: this.noticeContent,
        users: this.areaMembers,
        groups: this.areaGroups,
        organizations: this.areaOrgs,
        type: this.type,
        leftButtonName: this.leftButton,
        rightButtonName: this.rightButton,
      };

      const result = await editMessage(params);
      if (result.status === 200) {
        this.$vux.toast.show({
          width: '16em',
          text: this.$t('notice.sendSuccess'),
        });
        this.$router.replace('/message');
        this.needRefresh = false;
      }
    },
    // 返回
    clickBack() {
      if (
        this.theme ||
        this.noticeContent ||
        this.areaMembersContent ||
        this.areaOrgsContent ||
        this.areaGroupsContent
      ) {
        this.$vux.confirm.show({
          content: this.$t('notice.cancelEdit'),
          confirmText: this.$t('notice.giveUp'),
          cancelText: this.$t('notice.cancel'),
          onConfirm: () => {
            this.$router.go(-1);
            this.needRefresh = false;
          },
        });
      } else {
        this.$router.go(-1);
        this.needRefresh = false;
      }
    },
    // 需要初始化的数据
    initParams() {
      this.theme = '';
      this.noticeContent = '';
      this.areaMembersContent = '';
      this.areaOrgsContent = '';
      this.areaGroupsContent = '';
      this.areaMembers = [];
      this.areaOrgs = {};
      this.areaGroups = [];
      this.leftButton = null;
      this.rightButton = null;
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 由于编辑页面有keepalive, 所以每次重新进入需要初始化数据
      if (from.path === '/message') {
        vm.initParams();
        vm.needRefresh = true;
      }
    });
  },
};
</script>

<style scoped>
.notice-content {
  padding: 25px 0 0 30px;
}
.area-box {
  padding: 25px 30px 25px 30px;
}
.icon {
  position: absolute;
  top: 50%;
  margin-top: -28px;
  right: 24px;
}
.area-content {
  margin-right: 60px;
  word-wrap: break-word;
  word-break: break-all;
  width: 60%;
  text-align: right;
}
.cancel {
  width: 30px;
  height: 30px;
  margin-top: 4px;
  margin-left: 10px;
}
.area-content {
  padding-bottom: 15px;
}
.edit-box /deep/ .weui-cell:before {
  border: none;
}
</style>
